<template>
	<div class="father">
		<div class="card">
			<el-row :gutter="10" type="flex">
				<el-col :span="12">
					<el-card shadow="never" style="height: 100%">
						<div class="card-header">
							<span>用户输入</span>
						</div>
						<!-- 项目基本信息 -->
						<div class="mod">
							<div class="form-head">
								<span>项目基本信息</span>
								<el-button @click="btnclick" class="btn"
									>提交</el-button
								>
							</div>
							<el-form
								:inline="true"
								:model="form"
								class="demo-form-inline"
							>
								<el-row>
									<el-col :span="10">
										<div class="inputform">
											<div>项目名称</div>
											<input
												v-model="state.info.name"
												placeholder="请输入"
											/>
										</div>
									</el-col>
									<el-col :span="14">
										<div class="icon">
											<span>图片上传</span>
											<div>
												<el-upload
												v-model:file-list="fileList1"
													:auto-upload="true"
													action="http://oao.zhichengshangxin.com/UploadsFile"
													class="upload-demo"
													:on-success="imgupload"
													:limit="2"
											
											:on-remove="handleRemove1"
										    :on-change="cg1"
													:show-file-list="true"
												>
													<div
														class="iconfont icon-yunshangchuan_o"
													>
														上传
													</div>
												</el-upload>
											</div>
											<el-image
												style="
													width: 50px;
													height: 50px;
												"
												
												:src="`http://oao.zhichengshangxin.com/${state.info.img}`"
												fit="fill"
											/>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="10">
										<div class="inputform">
											<div>项目地址</div>
											<input
												v-model="state.info.address"
												placeholder="请输入"
											/>
										</div>
									</el-col>
									<el-col :span="14">
										<div class="inputform">
											<div style="margin-left: 180px">
												竣工日期
											</div>
											<el-date-picker
												v-model="state.info.time"
												type="date"
												placeholder="请选择竣工日期"
											/>
										</div>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="10">
										<div class="inputform">
											<div>建筑面积</div>
											<input
												v-model="state.info.area"
												placeholder="请输入"
											/>
										</div>
									</el-col>
									<el-col :span="14">
										<el-row>
											<el-col :span="10">
												<div class="inputformbr">
													<div
														style="
															margin-left: 30px;
														"
													>
														其中，地上
													</div>
													<input
														v-model="state.info.up"
														placeholder="请输入"
													/>
												</div>
											</el-col>
											<el-col :span="7">
												<div class="inputformbr">
													<div
														style="
															padding-left: 10px;
														"
													>
														地下
													</div>
													<input
														placeholder="请输入"
														v-model="
															state.info.down
														"
													/>
												</div>
											</el-col>
											<el-col :span="7"></el-col>
										</el-row>
										<el-row>
											<el-col :span="10">
												<div class="inputformbr">
													<div
														style="
															margin-left: 30px;
														"
													>
														其中，办公
													</div>
													<input
														v-model="
															state.info.office
														"
														placeholder="请输入"
													/>
												</div>
											</el-col>
											<el-col :span="7">
												<div class="inputformbr">
													<div
														style="
															padding-left: 10px;
														"
													>
														商场
													</div>
													<input
														placeholder="请输入"
														v-model="
															state.info.shop
														"
													/>
												</div>
											</el-col>
											<el-col :span="7">
												<div class="inputformbr">
													<div
														style="
															padding-left: 10px;
														"
													>
														公寓
													</div>
													<input
														v-model="
															state.info.home
														"
														placeholder="请输入"
													/>
												</div>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="10" class="car">
												<div class="inputformbr">
													<div
														style="
															margin-left: 30px;
														"
													>
														车库
													</div>
													<input
														v-model="
															state.info.garage
														"
														placeholder="请输入"
													/>
												</div>
											</el-col>
											<el-col :span="7">
												<div class="inputformbr">
													<div
														style="
															padding-left: 10px;
														"
													>
														酒店
													</div>
													<input
														placeholder="请输入"
														v-model="
															state.info.hotel
														"
													/>
												</div>
											</el-col>
											<el-col :span="7">
												<div class="inputformbr">
													<!-- <span style="margin-left: 10px; font-size: 14px">(</span> -->
													<div
														style="
															padding-left: 10px;
														"
													>
														( 星级
													</div>
													<input
														v-model="
															state.info.level
														"
														placeholder="请输入"
														style="width: 60px"
													/>
													<span
														style="font-size: 14px"
													>
														)</span
													>
												</div>
											</el-col>
										</el-row>
									</el-col>
								</el-row>
								<div class="crux">
									<span style="font-size: 14px"
										>关键文件上传</span
									>
									<div style="margin-left: 150px">
										<el-upload
											v-model:file-list="fileList"
											:auto-upload="true"
											ref="upfile"
											action="http://oao.zhichengshangxin.com/UploadsFile"
											class="upload-demo"
											:on-success="fileupload"
											:limit="2"
											:before-upload="bf"
											:on-remove="handleRemove"
										    :on-change="cg"
											:show-file-list="true"
										>
											<div
												class="iconfont icon-yunshangchuan_o"
											>
												上传
											</div>
										</el-upload>
									</div>
									<el-button
										style="margin-left: 20px"
										type="primary"
										@click="downFile"
										>下载文件</el-button
									>
								</div>
								<el-form-item class="textareas">
									<div class="inputs">
										<span
											@click="state.info.text = ''"
											class="iconfont icon-shanchu"
										></span>
										<el-input
											v-model="state.info.text"
											type="textarea"
										/>
									</div>
								</el-form-item>
							</el-form>
						</div>
						<!-- 能源费率 -->
						<div class="mod">
							<div class="form-head">
								<span>能源费率</span>
								<el-button @click="nengclick" class="btn"
									>提交</el-button
								>
							</div>
							<el-form :inline="true" :model="energy">
								<!-- 夏季电价 -->
								<div class="energy">
									<div class="energy_form">
										<p>夏季</p>
										<div>
											<el-form-item
												class="date"
												label="日期"
											>
												<el-date-picker
													v-model="energy.sumdate"
													end-placeholder="结束日期"
													range-separator="至"
													start-placeholder="开始日期"
													type="daterange"
												/>
											</el-form-item>
										</div>
										<div class="summer">
											<el-row>
												<el-col :span="16">
													<div class="rmb">
														<div>电价RMB/kWh</div>
														<div>
															<input
																v-model="
																	state
																		.nengdata
																		.electric
																		.peak
																"
																placeholder="请输入"
																style="
																	width: 55px;
																"
															/>
															<span>(峰)</span>
														</div>
														<div>
															<input
																v-model="
																	state
																		.nengdata
																		.electric
																		.flat
																"
																placeholder="请输入"
																style="
																	width: 55px;
																"
															/>
															<span>(平)</span>
														</div>
														<div>
															<input
																v-model="
																	state
																		.nengdata
																		.electric
																		.valley
																"
																placeholder="请输入"
																style="
																	width: 55px;
																"
															/>
															<span>(谷)</span>
														</div>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="color">
														<div class="fpg">
															<div
																style="
																	width: 12px;
																	height: 12px;
																	background: #f79646;
																"
															></div>
															<div>峰</div>
														</div>
														<div class="fpg">
															<div
																style="
																	width: 12px;
																	height: 12px;
																	background: #0070c0;
																"
															></div>
															<div>平</div>
														</div>
														<div class="fpg">
															<div
																style="
																	width: 12px;
																	height: 12px;
																	background: #d6ebfa;
																"
															></div>
															<div>谷</div>
														</div>
													</div>
												</el-col>
											</el-row>
											<div class="day">
												<div
													v-for="(i, index) in state
														.nengdata.shidata"
													:key="index"
												>
													<span
														v-if="i.state === 2"
														class="hour1"
														@click="qie(i)"
														>{{ i.date }}</span
													>
													<span
														v-if="i.state === 1"
														class="hour"
														@click="qie(i)"
														>{{ i.date }}</span
													>
													<span
														v-if="i.state === 3"
														class="hour2"
														@click="qie(i)"
														>{{ i.date }}</span
													>
												</div>
												<div class="shi">时</div>
											</div>
										</div>
									</div>
								</div>
								<!-- 非夏季电价 -->
								<div class="energy">
									<el-form
										:inline="true"
										:model="state.nengdata.electric1"
										class="energy_form"
									>
										<p>非夏季</p>
										<div>
											<el-form-item
												class="date"
												label="日期"
											>
												<el-date-picker
													v-model="
														state.nengdata.date
													"
													end-placeholder="结束日期"
													range-separator="至"
													start-placeholder="开始日期"
													type="daterange"
												/>
											</el-form-item>
										</div>
										<div class="summer">
											<el-row>
												<el-col :span="16">
													<div class="rmb">
														<div>电价RMB/kWh</div>
														<div>
															<input
																v-model="
																	state
																		.nengdata
																		.electric1
																		.peak
																"
																placeholder="请输入"
																style="
																	width: 55px;
																"
															/>
															<span>(峰)</span>
														</div>
														<div>
															<input
																v-model="
																	state
																		.nengdata
																		.electric1
																		.flat
																"
																placeholder="请输入"
																style="
																	width: 55px;
																"
															/>
															<span>(平)</span>
														</div>
														<div>
															<input
																v-model="
																	state
																		.nengdata
																		.electric1
																		.valley
																"
																placeholder="请输入"
																style="
																	width: 55px;
																"
															/>
															<span>(谷)</span>
														</div>
													</div>
												</el-col>
												<el-col :span="8">
													<div class="color">
														<div class="fpg">
															<div
																style="
																	width: 12px;
																	height: 12px;
																	background: #f79646;
																"
															></div>
															<div>峰</div>
														</div>
														<div class="fpg">
															<div
																style="
																	width: 12px;
																	height: 12px;
																	background: #0070c0;
																"
															></div>
															<div>平</div>
														</div>
														<div class="fpg">
															<div
																style="
																	width: 12px;
																	height: 12px;
																	background: #d6ebfa;
																"
															></div>
															<div>谷</div>
														</div>
													</div>
												</el-col>
											</el-row>
											<div class="day">
												<div
													v-for="(i, index) in state
														.nengdata.shidata1"
													:key="index"
												>
													<span
														v-if="i.state === 2"
														class="hour1"
														@click="qie1(i)"
														>{{ i.date }}</span
													>
													<span
														v-if="i.state === 1"
														class="hour"
														@click="qie1(i)"
														>{{ i.date }}</span
													>
													<span
														v-if="i.state === 3"
														class="hour2"
														@click="qie1(i)"
														>{{ i.date }}</span
													>
												</div>
												<div class="shi">时</div>
											</div>
										</div>
									</el-form>
								</div>
								<!-- <div>
									<el-row>
										<el-col :span="9">
											<div class="inputformbr">
												<div>电价RMB/kWh(去年平均)</div>
												<input placeholder="请输入" />
											</div>
										</el-col>
										<el-col :span="6">
											<div class="inputformbr">
												<div>天然气RMB/m³</div>
												<input
													placeholder="请输入"
													style="width: 60px"
												/>
											</div>
										</el-col>
										<el-col :span="9">
											<div class="inputformbr">
												<div>市政热源单价RMB/kWh</div>
												<input placeholder="请输入" />
											</div>
										</el-col>
									</el-row>
								</div> -->
							</el-form>
						</div>
						<!-- 入住率 -->
						<div class="mod">
							<div class="form-head">
								<span>入住率</span>
								<el-button @click="ruzhu" class="btn"
									>提交</el-button
								>
							</div>
							<el-form>
								<el-form-item label="2021年（月份）">
									<ProjectForm
										:tableData="state.tableData"
									></ProjectForm>
								</el-form-item>
								<el-form-item label="2022年（月份）">
									<ProjectForm
										:tableData="state.tableData1"
									></ProjectForm>
								</el-form-item>
							</el-form>
						</div>
						<!-- 维修量 -->
						<div class="mod">
							<div class="form-head">
								<span>维修量（仅冷热站，单位：次）</span>
								<el-button @click="weixiu" class="btn"
									>提交</el-button
								>
							</div>
							<el-form>
								<el-form-item label="2021年（月份）">
									<ProjectForm
										:tableData="state.tableData2"
									></ProjectForm>
								</el-form-item>
								<el-form-item label="2022年（月份）">
									<ProjectForm
										:tableData="state.tableData3"
									></ProjectForm> </el-form-item
							></el-form>
						</div>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card shadow="never" style="height: 100%">
						<div class="card-white"></div>
						<!-- 项目需求 -->
						<div class="mod" style="padding-bottom: 24px">
							<div class="form-head">
								<span>项目需求</span>
								<el-button class="btn" @click="add = true"
									>新增</el-button
								>
							</div>
							<el-table
								height="200"
								class="eltab"
								:data="project"
								:header-cell-style="{ color: '#333' }"
								border
								style="width: 100%,margin-bottom: 20px"
							>
								<el-table-column
									label="序号"
									type="index"
									width="60"
								>
								</el-table-column>
								<el-table-column
									label="时间"
									prop="time"
									width="120"
								>
									<template #default="scope">
										<input v-model="scope.row.time" />
									</template>
								</el-table-column>
								<el-table-column
									label="需求内容"
									prop="need"
									width="260"
								>
									<template #default="scope">
										<input v-model="scope.row.need" />
									</template>
								</el-table-column>
								<el-table-column label="签名" prop="signname">
									<template #default="scope">
										<input v-model="scope.row.signname" />
									</template>
								</el-table-column>
								<el-table-column label="级别" prop="level">
									<template #default="scope">
										<input v-model="scope.row.level" />
									</template>
								</el-table-column>
								<el-table-column label="确认" prop="confirm">
									<el-button
										@click="quren"
										:icon="ArrowRight"
										circle
										style="
											color: #f79646;
											background: #eaf2fa;
											border: #eaf2fa;
										"
									/>
								</el-table-column>
							</el-table>
						</div>
						<!-- 相关人员联系方式 -->
						<div class="mod" style="padding-bottom: 24px">
							<div class="form-head">
								<span>相关人员联系方式</span>
								<el-button @click="xiangguan" class="btn"
									>提交</el-button
								>
							</div>
							<el-table
								:data="state.personnel"
								:header-cell-style="{ color: '#333' }"
								border
								style="width: 100%"
							>
								<el-table-column
									label="序号"
									prop="id"
									width="60"
								>
									<template #default="scope">
										<input v-model="scope.row.id" />
									</template>
								</el-table-column>
								<el-table-column label="姓名" prop="name">
									<template #default="scope">
										<input v-model="scope.row.name" />
									</template>
								</el-table-column>
								<el-table-column label="职位" prop="position">
									<template #default="scope">
										<input v-model="scope.row.position" />
									</template>
								</el-table-column>
								<el-table-column label="工作职责" prop="duty">
									<template #default="scope">
										<input v-model="scope.row.duty" />
									</template>
								</el-table-column>
								<el-table-column
									label="手机"
									prop="phone"
									width="120"
								>
									<template #default="scope">
										<input v-model="scope.row.phone" />
									</template>
								</el-table-column>
								<el-table-column label="电邮" prop="email">
									<template #default="scope">
										<input v-model="scope.row.email" />
									</template>
								</el-table-column>
								<el-table-column label="倒班情况" prop="shift">
									<template #default="scope">
										<input v-model="scope.row.shift" />
									</template>
								</el-table-column>
							</el-table>
						</div>
					</el-card>
				</el-col>
			</el-row>
			<div class="dialogs userDialog">
				<el-dialog
					v-model="add"
					destroy-on-close
					title="新建项目"
					width="30%"
				>
					<div class="line4"></div>
					<el-form ref="fm" :model="sta.addform" :rules="rules">
						<el-form-item label="时间" prop="time">
							<el-date-picker
								v-model="sta.addform.time"
								type="date"
								class="datepicker"
								placeholder="请选择日期"
							/>
						</el-form-item>
						<el-form-item label="内容" prop="need">
							<el-input
								v-model="sta.addform.need"
								autocomplete="off"
								placeholder="请输入内容"
							/>
						</el-form-item>
						<el-form-item label="签名" prop="signname">
							<el-input
								v-model="sta.addform.signname"
								autocomplete="off"
								placeholder="请输入签名"
							/>
						</el-form-item>
						<el-form-item label="级别" prop="level">
							<el-select
								v-model="sta.addform.level"
								placeholder="选择级别"
							>
								<el-option label="一级" value="一级" />
								<el-option label="二级" value="二级" />
								<el-option label="三级" value="三级" />
							</el-select>
						</el-form-item>
					</el-form>
					<template #footer>
						<span class="dialog-footer">
							<el-button @click="add = false" class="cancel"
								>取消</el-button
							>
							<el-button
								type="primary"
								@click="addproject(fm)"
								class="save"
								>保存</el-button
							>
						</span>
					</template>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script setup>
import {
	UserInfosub,
	UserRateSub,
	UserCheckinSub,
	UserRepairSub,
	UserDemandSub,
	UserContactSub,
	inuserput,
} from "@/api/model/login";
import { ArrowRight } from "@element-plus/icons-vue";
import dayjs from "dayjs";
import { ElMessage } from "element-plus";

import { reactive, ref, onMounted, toRaw } from "vue";
import ProjectForm from "./projectForm.vue";
const fileList = ref([]);
const fileList1 = ref([]);
let add = ref(false);
let fm = ref(null);
let sta = reactive({
	addform: {},
});
let upfile = ref(null)
// 项目基本信息
const form = reactive({
	name: "",
	address: "",
	endtime: "",
	area: "",
	landup: "",
	landdown: "",
	work: "",
	shopping: "",
	apartment: "",
	garage: "",
	hotel: "",
	star: "",
	desc: "",
});

// 能源费率
const energy = reactive({
	sumdate: "",
	feng: "",
	ping: "",
	gu: "",
	electricityPrice: "",
	gas: "",
	govhot: "",
});
let state = reactive({
	info: {},
	nengdata: {
		shidata: [
			{
				date: 1,
				state: 1,
			},
			{
				date: 2,
				state: 1,
			},
			{
				date: 3,
				state: 1,
			},
			{
				date: 4,
				state: 1,
			},
			{
				date: 5,
				state: 1,
			},
			{
				date: 6,
				state: 1,
			},
			{
				date: 7,
				state: 1,
			},
			{
				date: 8,
				state: 1,
			},
			{
				date: 9,
				state: 1,
			},
			{
				date: 10,
				state: 1,
			},
			{
				date: 11,
				state: 1,
			},
			{
				date: 12,
				state: 1,
			},
			{
				date: 13,
				state: 1,
			},
			{
				date: 14,
				state: 1,
			},
			{
				date: 15,
				state: 1,
			},
			{
				date: 16,
				state: 1,
			},
			{
				date: 17,
				state: 1,
			},
			{
				date: 18,
				state: 1,
			},
			{
				date: 19,
				state: 1,
			},
			{
				date: 20,
				state: 1,
			},
			{
				date: 21,
				state: 1,
			},
			{
				date: 22,
				state: 1,
			},
			{
				date: 23,
				state: 1,
			},
			{
				date: 24,
				state: 1,
			},
		],
		shidata1: [
			{
				date: 1,
				state: 1,
			},
			{
				date: 2,
				state: 1,
			},
			{
				date: 3,
				state: 1,
			},
			{
				date: 4,
				state: 1,
			},
			{
				date: 5,
				state: 1,
			},
			{
				date: 6,
				state: 1,
			},
			{
				date: 7,
				state: 1,
			},
			{
				date: 8,
				state: 1,
			},
			{
				date: 9,
				state: 1,
			},
			{
				date: 10,
				state: 1,
			},
			{
				date: 11,
				state: 1,
			},
			{
				date: 12,
				state: 1,
			},
			{
				date: 13,
				state: 1,
			},
			{
				date: 14,
				state: 1,
			},
			{
				date: 15,
				state: 1,
			},
			{
				date: 16,
				state: 1,
			},
			{
				date: 17,
				state: 1,
			},
			{
				date: 18,
				state: 1,
			},
			{
				date: 19,
				state: 1,
			},
			{
				date: 20,
				state: 1,
			},
			{
				date: 21,
				state: 1,
			},
			{
				date: 22,
				state: 1,
			},
			{
				date: 23,
				state: 1,
			},
			{
				date: 24,
				state: 1,
			},
		],
		date: "",
		date1: "",
		electric: {
			peak: "",
			flat: "",
			valley: "",
		},
		electric1: {
			peak: "",
			flat: "",
			valley: "",
		},
	},

	tableData: [
		{
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			six: "",
			seven: "",
			eight: "",
			nine: "",
			ten: "",
			eleven: "",
			twelve: "",
		},
	],

	tableData1: [
		{
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			six: "",
			seven: "",
			eight: "",
			nine: "",
			ten: "",
			eleven: "",
			twelve: "",
		},
	],

	tableData2: [
		{
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			six: "",
			seven: "",
			eight: "",
			nine: "",
			ten: "",
			eleven: "",
			twelve: "",
		},
	],

	tableData3: [
		{
			one: "",
			two: "",
			three: "",
			four: "",
			five: "",
			six: "",
			seven: "",
			eight: "",
			nine: "",
			ten: "",
			eleven: "",
			twelve: "",
		},
	],

	personnel: [
		{
			id: "1",
			name: "",
			position: "",
			duty: "",
			phone: "",
			email: "",
			shift: "",
		},
		{
			id: "2",
			name: "",
			position: "",
			duty: "",
			phone: "",
			email: "",
			shift: "",
		},
		{
			id: "3",
			name: "",
			position: "",
			duty: "",
			phone: "",
			email: "",
			shift: "",
		},
	],
});
const rules = reactive({
	time: [
		{
			type: "date",
			required: true,
			message: "选择日期",
			trigger: "change",
		},
	],
	need: [{ required: true, message: "请输入内容", trigger: "blur" }],
	signname: [{ required: true, message: "请输入签名", trigger: "blur" }],
	level: [
		{
			required: true,
			message: "请选择级别",
			trigger: "change",
		},
	],
});

// 项目需求
const project = ref([]);
const downFile = () => {
	window.open("http://oao.zhichengshangxin.com/" + state.info.file);
};
const imgupload = (e) => {
	ElMessage.success("成功上传图片");
	
	state.info.img = e.data;
	fileList1.value.push({
		name: e.data.split("/").at(-1),
		url: "http://oao.zhichengshangxin.com/" + e.data,
	});
};

const handleRemove1= ()=>{
	fileList.value = []
}
const cg1 = (f,files)=>{
	if(files){
    fileList1.value=files.slice(-1)
  }
}

onMounted(() => {
	getHui();
});

const getHui = async () => {
	let res = await inuserput();
	console.log(res, "Aaaaaaa");
	state.info = JSON.parse(res.data.info);

	state.nengdata = JSON.parse(res.data.rate);
	state.tableData = JSON.parse(res.data.checkin)[0];
	state.tableData1 = JSON.parse(res.data.checkin)[1];
	state.tableData2 = JSON.parse(res.data.repair)[0];
	state.tableData3 = JSON.parse(res.data.repair)[1];
	project.value = JSON.parse(res.data.demand);
	state.personnel = JSON.parse(res.data.contact);
	console.log(state);
};

const fileupload = (e) => {
	ElMessage.success("成功上传文件");
	console.log(state.info.file);
	state.info.file = e.data;
	fileList.value.push({
		name: e.data.split("/").at(-1),
		url: "http://oao.zhichengshangxin.com/" + e.data,
	});
};
const handleRemove = ()=>{
	fileList.value = []
}
const cg = (f,files)=>{
	if(files){
    fileList.value=files.slice(-1)
  }
}
const bf = (file)=>{
	console.log(file.name.split('.').at(-1));
	if (file.name.split('.').at(-1)==='docx'||file.name.split('.').at(-1)==='doc') {
		return true
		
	}
	ElMessage.error("只能上传docx或doc文件");
		return false
}
const btnclick = async () => {
	state.info.time = dayjs(state.info.time).format("YYYY-MM-DD");
	await UserInfosub({ info: state.info });
	localStorage.setItem("name", state.info.name);
};
const nengclick = async () => {
	await UserRateSub({ rate: state.nengdata });
};

const ruzhu = async () => {
	await UserCheckinSub({
		checkin: [state.tableData, state.tableData1],
	});
};
const addproject = async (fm) => {
	if (!fm) return;
	await fm.validate(async (valid) => {
		if (valid) {
			sta.addform.time = dayjs(sta.addform.time).format("YYYY-MM-DD");
			project.value.push(toRaw(sta.addform));
			sta.addform = {};
			add.value = false;
		}
	});
};
const weixiu = async () => {
	await UserRepairSub({
		repair: [state.tableData2, state.tableData3],
	});
};

const qie = (e) => {
	if (e.state == 1) {
		state.nengdata.shidata[e.date - 1].state = 3;
	} else if (e.state == 2) {
		state.nengdata.shidata[e.date - 1].state = 1;
	} else if (e.state == 3) {
		state.nengdata.shidata[e.date - 1].state = 2;
	}
};
const qie1 = (e) => {
	console.log(e);
	if (e.state == 1) {
		state.nengdata.shidata1[e.date - 1].state = 3;
	} else if (e.state == 2) {
		state.nengdata.shidata1[e.date - 1].state = 1;
	} else if (e.state == 3) {
		state.nengdata.shidata1[e.date - 1].state = 2;
	}
};
const xiangguan = async () => {
	await UserContactSub({
		contact: state.personnel,
	});
};
const quren = async () => {
	await UserDemandSub({
		demand: project.value,
	});
};
</script>

<style lang="less" scoped>
.userDialog {
	:deep(.el-dialog__title) {
		color: rgb(81, 99, 167);
		font-size: 19px;
	}

	:deep(.el-dialog__close) {
		font-size: 27px !important;
		color: rgb(81, 99, 167);
	}

	:deep(.el-dialog__body) {
		padding: 20px 0 20px;
	}
}

.dialog {
	.el-form {
		width: 246px;
		border-style: none;
		border-color: unset;
		border-radius: 8px;
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		font-weight: normal;
		font-style: normal;
		padding-top: 20px;
		margin-left: 20px;
	}

	/deep/.el-input__inner {
		-webkit-appearance: none;
		background-color: var(--el-input-bg-color, var(--el-color-white));
		background-image: none;
		border-radius: var(
			--el-input-border-radius,
			var(--el-border-radius-base)
		);
		border: var(--el-input-border, var(--el-border-base));
		box-sizing: border-box;
		color: var(--el-input-text-color, var(--el-text-color-regular));
		display: inline-block;
		font-size: inherit;
		height: 30px;
		line-height: 32px;
		outline: 0;
		padding: 0 30px;
		transition: var(--el-transition-border);
		width: 230px;
	}
}

.dialogs {
	/deep/.el-dialog {
		--el-dialog-width: 410px;
		--el-dialog-margin-top: 15vh;
		--el-dialog-bg-color: var(--el-color-white);
		--el-dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
		--el-dialog-title-font-size: var(--el-font-size-large);
		--el-dialog-content-font-size: 14px;
		--el-dialog-font-line-height: var(--el-font-line-height-primary);
		--el-dialog-padding-primary: 20px;
		position: relative;
		margin: var(--el-dialog-margin-top, 15vh) auto 50px;
		background: var(--el-dialog-bg-color);
		border-radius: 8px;
		box-shadow: var(--el-dialog-box-shadow);
		box-sizing: border-box;
		width: var(--el-dialog-width, 410px);
	}

	/deep/.line4 {
		border-bottom: 2px rgba(77, 98, 165, 0.2) solid;
	}

	/deep/.el-input {
		width: 200px;
	}

	.el-form {
		width: 246px;
		border-style: none;
		border-color: unset;
		border-radius: 8px;
		font-size: 14px;
		text-align: center;
		line-height: 20px;
		font-weight: normal;
		font-style: normal;
		padding-top: 20px;
		margin-left: 40px;
	}

	/deep/.el-input__inner {
		left: 870px;
		top: 428px;
		height: 30px;
		border-radius: 4px;
		color: rgba(204, 204, 204, 100);
		font-size: 14px;
		text-align: left;
		font-family: Microsoft Yahei;
		border: 1px solid rgba(204, 204, 204, 100);
		line-height: 32px;
		outline: 0;
		padding: 0 11px;
		transition: var(--el-transition-border);
		width: 250px;
	}
	/deep/.el-form-item:first-of-type .el-input__inner {
		padding-left: 30px;
	}

	.userimg {
		padding-top: 30px;
		margin: auto;
		width: 55px;
		height: 55px;
		border-radius: 100%;
		background-color: thistle;
	}

	/deep/ .el-form-item__label {
		left: 790px;
		top: 433px;
		width: 57px;
		height: 20px;
		color: rgba(127, 127, 127, 100);
		font-size: 14px;
		text-align: left;
		font-family: SourceHanSansSC-regular;
	}
}

::v-deep input {
	border: 1px solid #f5f8fb;
	background: #f5f8fb;
}

.day {
	cursor: pointer;
}

.father {
	display: flex;
	justify-content: center;
	align-items: center;

	.card {
		width: 100%;
		background-color: #eaf2fa;

		.card-header {
			padding: 10px 24px;
			font-size: 20px;
			font-weight: 600;
			color: #4d62a5;
			border-bottom: 1px solid #eaedf5;

			span {
				letter-spacing: 2px;
			}
		}

		.card-white {
			padding: 26px;
		}
	}
}

.inputform {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5px 0;

	div {
		font-size: 14px;
	}

	input {
		width: 200px;
		height: 24px;
		border: 1px solid #d8d8d8;
		padding: 1px 3px;
		border-radius: 4px;
		margin: 0 5px;
	}
}

.inputformbr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 5px 0;

	div {
		margin-left: 10px;
		font-size: 14px;
	}

	input {
		width: 90px;
		height: 24px;
		border: 1px solid #d8d8d8;
		padding: 1px 3px;
		border-radius: 4px;
		// margin: 0 5px;
	}
}

/deep/ .el-card__body {
	padding: 20px 0;
}

.mod {
	border-bottom: 1px solid #eaedf5;
	margin: 0 24px;

	.el-table {
		:deep(.el-table__header) {
			width: 100% !important;

			thead th {
				text-align: center;
			}
		}

		:deep(.el-table__body) {
			width: 100% !important;

			tbody td {
				text-align: center;
			}
		}
	}
}

.textareas {
	width: 100%;

	div,
	textarea {
		width: 100%;
	}
}

.form-head {
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	margin: 15px 0;

	span {
		font-size: 16px;
		font-weight: 600;
		color: #7f7f7f;
	}

	.btn {
		width: 104px;
		height: 30px;
		color: #fff;
		margin-left: 10px;
		background-color: #b4c7e7;
	}

	.area {
		display: flex;
	}
}

.icon {
	display: flex;
	justify-content: space-between;
	align-items: center;

	span {
		margin-left: 180px;
		font-size: 14px;
	}
}

.car {
	padding-left: 42px;
}

.crux {
	display: flex;
}

.el-upload {
	div {
		font-size: 15px;
		color: #4d62a5;
		display: flex;
	}

	.icon-yunshangchuan_o:before {
		font-size: 22px;
	}
}

.inputs {
	padding-top: 10px;
	position: relative;

	& > span {
		position: absolute;
		right: 5px;
		top: 10px;
		z-index: 10;
		font-size: 22px;
		color: #4d62a5;
	}
	:deep(.el-textarea) {
		border: 1px solid #eaf2fa;

		textarea {
			resize: none;
			height: 100px;
			width: 100%;
		}
	}

	:deep(.el-textarea__inner)::-webkit-scrollbar {
		width: 5px;
		height: 20px;
		background: #eee;
	}

	:deep(.el-textarea__inner)::-webkit-scrollbar-thumb {
		background: #4d62a5;
		border-radius: 5px;
	}
}

.energy {
	border: 1px solid #ccc;
	border-radius: 4px;
	margin-bottom: 16px;

	p {
		font-size: 14px;
		text-align: left;
		padding-bottom: 10px;
	}

	.energy_form {
		margin: 8px;

		.date {
			margin-left: 66px;

			:deep(.el-form-item__content) {
				width: 200px;
			}
		}
		.summer {
			.rmb {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10px;

				div {
					font-size: 14px;
				}

				input {
					width: 80px;
					height: 24px;
					border: 1px solid #d8d8d8;
					padding: 1px 3px;
					border-radius: 4px;
					margin: 0 5px;
				}
			}
		}
	}
}

.color {
	margin-bottom: 5px;
	display: flex;
	justify-content: flex-end;

	.fpg {
		margin-left: 25px;
		width: 30px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.day {
	display: flex;
	justify-content: space-between;

	.hour {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #0070c0;
		text-align: center;
		line-height: 20px;
	}

	.hour1 {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #f79646;
		text-align: center;
		line-height: 20px;
	}

	.hour2 {
		display: inline-block;
		width: 20px;
		height: 20px;
		background: #d6ebfa;
		text-align: center;
		line-height: 20px;
	}

	.shi {
		width: 20px;
		height: 20px;
		text-align: center;
		line-height: 20px;
	}
}
</style>
